<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>发布活动</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
[v-cloak] {
	display: none!important;
}
.avatar-uploader {
	display: inline-block!important;
}
.el-input__inner {
	border: 1px solid #C7CBD0!important;
}
.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
	width: 520px!important;
}
.el-date-editor .el-range-input {
	font-size: 16px!important;
}
.el-date-editor .el-range-input::-webkit-input-placeholder {
	color: #9D9999;
}
.el-date-editor .el-range-input::-moz-input-placeholder {
	color: #9D9999;
}
.el-date-editor .el-range-input::-ms-input-placeholder {
	color: #9D9999;
}
</style>
</head>
<body>
	<div id="app" v-cloak>
		<header>
    </header>
		<div class="header-space"></div>
		<section class="section491">
			<div class="content">
				<div class="title">活动信息</div>
				<ul class="form">
					<li>
						<input type="text" v-model="name" placeholder="请输入活动标题 (限制50个字)" class="input">
					</li>
					<li>
						<!-- <select name="" id="" class="">
							<option value="">菜单按钮1</option>
							<option value="">菜单按钮2</option>
							<option value="">菜单按钮3</option>
							<option value="">菜单按钮4</option>
							<option value="">菜单按钮5</option>
						</select><span class="left">—</span><select name="" id="" class="">
							<option value="">2019-12-01  12:301</option>
							<option value="">2019-12-01  12:302</option>
							<option value="">2019-12-01  12:303</option>
							<option value="">2019-12-01  12:304</option>
							<option value="">2019-12-01  12:305</option>
						</select> -->
						<div class="block">
							<el-date-picker
								v-model="dateTime"
								type="datetimerange"
								range-separator="-"
								value-format="yyyy-MM-dd HH:mm:ss"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								prefix-icon="none"
								@change="handleDateTimeChange"
							>
							</el-date-picker>
						</div>
					</li>
					<li>
						<input type="text" v-model="total" placeholder="请输入报名人数" class="input w180">
					</li>
					<li>
						<!-- <div class="upload">
							<span>上传列表图</span>
							<input type="file" name="" id="">
						</div> -->
						<div class="upload-box">
							<el-upload
								key="list-key"
								:show-file-list="false"
								:before-upload="checkImg"
								:http-request="uploadCoverImg"
								accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
								class="avatar-uploader"
								action=""
							>
								<div class="img" v-if="cover">
									<img :src="cover" alt="图片出错了" style="width: 256px;height:143px;" class="item-img">
								</div>
								<div v-else class="upload">
									<span>上传列表图</span>
								</div>
							</el-upload>
						<!-- </div>
						<div class="upload-box"> -->
							<!-- <div class="upload">
								<span>上传详情图</span>
								<input type="file" name="" id="">
							</div> -->
							<el-upload
								key="detail-key"
								:show-file-list="false"
								:before-upload="checkImg"
								:http-request="uploadDetailImg"
								accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
								class="avatar-uploader"
								action=""
							>
								<div class="img" v-if="detail">
									<img :src="detail" style="width: 256px;height:143px;" alt="图片出错了" class="item-img">
								</div>
								<div v-else class="upload">
									<span>上传详情图</span>
								</div>
							</el-upload>
						</div>
					</li>
					<li>
						<textarea name="" v-model="content" placeholder="请输入活动详情" id="" cols="30" rows="10"></textarea>
					</li>
				</ul>
				<div class="operate">
					<a href="javascript:void(0)" @click="submitHandle" class="btn btn-blue">发布</a>
					<a href="43.html" class="btn btn-white">返回</a>
				</div>
			</div>
		</section>
		<footer id="footer"></footer>
	</div>	
<script src="js/jquery.min.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/request.js"></script>
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
<script>
	$(function(){
		$("header").load("./enterpriseCommon/header.html");
		$("#footer").load("./enterpriseCommon/footer.html");
	})
	var rules = {
		cover: {
			test: function(src) {
				return src !== ''
			},
			msg: '封面图必须上传'
		},
		detail: {
			test: function(src) {
				return src !== ''
			},
			msg: '详情图必须上传'
		},
		name: {
			test: function(val) {
				return val !== ''
			},
			msg: '活动标题必须填写'
		},
		total: {
			test: function(val) {
				return /(^[1-9]\d*$)/.test(val)
			},
			msg: '请正确填写报名人数'
		},
		start: {
			test: function(val) {
				return val !== ''
			},
			msg: '请选择活动开始时间'
		},
		end: {
			test: function(val) {
				return val !== ''
			},
			msg: '请选择结束结束时间'
		},
		content: {
			test: function(val) {
				return val !== ''
			},
			msg: '活动内容必须填写'
		}
	};
	var vm = new Vue({
		el: '#app',
		data() {
			return {
				id: this.getRequest().id || '', // 有id时为修改
				name: '',  // 标题名称
				dateTime: [], // 起始结束时间
				cover: '',  // 封面图
				detail: '',  // 详情图
				total: '',  // 报名人数
				start: '',  // 开始时间
				end: '',	// 结束时间
				content: '',  // 活动内容
			}
		},
		mounted () {
			if (this.id) {
				this.fetchActivityDetail();
			}
		},
		filters: {},
		methods: {
			fetchActivityDetail() {
				var vm = this;
				var url = 'enterprise/activity/detail/' + this.id;
				request( url, 'GET', '',
					function (res) {
						console.log(res);
						var detail = res.data;
						vm.cover = detail.cover;
						vm.detail = detail.detail;
						vm.name = detail.name;
						vm.total = detail.total;
						vm.content = detail.content;
						vm.start = detail.start;
						vm.end = detail.end;
						var dateArr = [detail.start, detail.end];
						vm.dateTime = dateArr;
					},
					function (err) {
						var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
					}
				)
			},
			submitHandle() {
				var loading = this.$loading({
					lock: true,
					text: '发布中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
        var that = this;
				var isPass = Object.keys(rules).every(function(key) {
					var val = this[key];
					var rule = rules[key];
					var result = rule.test(val);
					if (!result) {
						loading.close();
						this.$message({
							type: 'warning',
							message: rule.msg
						})
					}
					return result
				}, this);
				if (!isPass) return;
				this.sendData(loading);
			},
			sendData(loading) {
				var vm = this;
				var param = {
					name: this.name,
					cover: this.cover.split('/')[(this.cover.split('/').length - 1)],
					detail: this.detail.split('/')[(this.detail.split('/').length - 1)],
					total: this.total,
					start: this.start,
					end: this.end,
					content: this.content
				}
				// console.log(param);
				request( 'enterprise/activity/' + this.id, 'PUT', JSON.stringify(param), function (res) {
					console.log(res)
					loading.close();
					vm.$message({
						message: res.message,
						type: 'success'
					});
					setTimeout(function(){
						location.href="43.html";
					}, 800)
				}, function (err) {
					var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
					vm.$message({
						type: 'warning',
						message: msg
					})
					loading.close();
				})
			},
			checkImg: function (file, fileList) {
				if (file.size > 10 * 1024 * 1024) {
					this.$message('上传图片大小应小于10MB');
					return false
				}
				return true
			},
			uploadCoverImg: function (e) {
				uploadImg({
					file: e.file,
					success: successFn.bind(this),
					fail: failFn.bind(this)
				})

				function successFn(res) {
					console.log('uploadSuccess', res);
					this.cover = qiniuUrl + '/' + res.key;
				}

				function failFn(err) {

				}
			},
			uploadDetailImg: function (e) {
				uploadImg({
					file: e.file,
					success: successFn.bind(this),
					fail: failFn.bind(this)
				})

				function successFn(res) {
					console.log('uploadSuccess', res);
					this.detail =qiniuUrl + '/' + res.key;
				}

				function failFn(err) {

				}
			},
			handleDateTimeChange: function(e) {
				// console.log(e);
				this.start = e[0];
				this.end = e[1];
			},
			getRequest() {  
				var url = location.search;
				var theRequest = {};
				var strs = []
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					strs = str.split("&");
					for(var i = 0; i < strs.length; i ++) {
							theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			}
		}
	})
</script>
</body>
</html>